<template>
  <div class="container">
    <van-list v-if="cardList.length" v-model="loading" :immediate-check="false" :finished="finished" offset="100" finished-text="没有更多了" @load="getCardList">
      <ul class="card-list">
        <li :class="['card-option', index < cardList.length - 1 ? 'van-hairline--bottom' : '']" v-for="(item, index) in cardList" :key="index">
          <div class="left">
            <img class="avator" :src="item.headImgUrl ? item.headImgUrl : require('@assets/images/avator.png')" alt="" />
            <div class="user-info">
              <div class="nickname">{{ item.nickname }}</div>
              <div class="company">公司：{{ item.company }}</div>
              <div class="num">投递名片：{{ item.sendNum }}次</div>
              <div class="date">时间：{{ item.createTime }}</div>
            </div>
          </div>
          <a class="right" :href="`tel:${item.phone}`">
            <img src="@assets/images/phone.png" alt="" />
          </a>
        </li>
      </ul>
    </van-list>
    <Empty v-else />
  </div>
</template>

<script>
import Empty from '@components/empty';
import { Toast, List } from 'vant';
import { deliveryCard_getDeliveryCardList } from '@api/user';
export default {
  components: {
    [List.name]: List,
    Empty
  },
  data() {
    return {
      loading: false,
      finished: false,
      pageNum: 0,
      pageSize: 10,
      cardList: []
    };
  },
  mounted() {
    this.getCardList();
  },
  methods: {
    async getCardList() {
      this.pageNum++;
      const { pageSize, pageNum } = this;
      let res = await deliveryCard_getDeliveryCardList({ pageSize, pageNum });
      this.loading = false;
      if (res.code === 200) {
        if (pageNum >= Math.ceil(res.data.totalNum / pageSize)) {
          this.finished = true;
        }
        this.cardList = pageNum === 1 ? res.data.list : this.cardList.concat(res.data.list);
      } else {
        Toast(res.msg);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.card-list {
  padding: 0 32px;
  background: #fff;
}
.card-option {
  height: 182px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    display: flex;
    align-items: center;
    .avator {
      width: 74px;
      height: 74px;
      margin-right: 22px;
      border-radius: 50%;
    }
    .user-info {
      color: #596880;
      font-size: 22px;
      line-height: 36px;
    }
    .nickname {
      display: flex;
      align-items: center;
      font-size: 28px;
      color: #121c32;
      margin-bottom: 5px;
    }
    .money {
      margin: 24px 0 16px;
    }
  }
  .right {
    display: inline-block;
    width: 72px;
    height: 72px;
    img {
      width: 100%;
    }
  }
}
</style>
